<template>
  <el-dialog
    title="题目预览"
    :visible="questionDialog"
    width="50%"
    center
    @close="closeDialog"
  >
    <!-- 试题 -->
    <el-row type="flex" style="height:35px" align="middle">
      <el-col :span="6">
        <span>【题型】：{{ questionType }}</span>
      </el-col>
      <el-col :span="6">
        <span>【编号】：{{ questionDialogDate.id }}</span>
      </el-col>
      <el-col :span="6">
        <span>【难度】：{{ difficulty }}</span>
      </el-col>
      <el-col :span="6">
        <span>【标签】：{{ questionDialogDate.tags }}</span>
      </el-col>
    </el-row>
    <el-row type="flex" style="height:35px" align="middle">
      <el-col :span="6">
        <span
          >【学科】：{{
            questionDialogDate.subject || questionDialogDate.subjectName
          }}</span
        >
      </el-col>
      <el-col :span="6">
        <span
          >【目录】：{{
            questionDialogDate.catalog || questionDialogDate.directoryName
          }}</span
        >
      </el-col>
      <el-col :span="6">
        <span>【方向】：{{ questionDialogDate.direction }}</span>
      </el-col>
      <el-col :span="6">
        <span></span>
      </el-col>
    </el-row>
    <!-- 分割线 -->
    <hr />
    <el-row type="flex" style="height:40px" align="middle">
      <el-col>
        <span>【题干】：</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <span v-html="questionDialogDate.question" style="color:#0000ff"></span>
      </el-col>
    </el-row>
    <!-- 分割线 -->
    <hr />
    <el-row type="flex" align="middle">
      <el-col>
        <span>【参考答案】：</span>
        <el-button type="danger" size="mini" @click="isShow = !isShow">
          视频答案预览
        </el-button>
        <el-row v-if="isShow" type="flex" align="middle" style="height:200px">
          <video
            :src="questionDialogDate.videoURL"
            muted
            controls
            style="width:300px;display:block"
          ></video>
        </el-row>
      </el-col>
    </el-row>
    <!-- 分割线 -->
    <hr />
    <el-row type="flex" style="height:40px" align="middle">
      <span>【答案解析】：</span>
      <div v-html="questionDialogDate.answer"></div>
    </el-row>
    <!-- 分割线 -->
    <hr />
    <el-row type="flex" style="height:40px" align="middle">
      <el-col>
        <span>【题目备注】：{{ questionDialogDate.remarks }}</span>
      </el-col>
    </el-row>
    <!-- /试题 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'QuestionsDialog',
  props: {
    // 控制显示隐藏
    questionDialog: {
      type: Boolean,
      default: false
    },
    // 父组件传递的数据
    questionDialogDate: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isShow: false
    }
  },
  computed: {
    questionType() {
      if (this.questionDialogDate.questionType == '1') {
        return '单选'
      } else if (this.questionDialogDate.questionType == '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    difficulty() {
      if (this.questionDialogDate.questionType == '1') {
        return '简单'
      } else if (this.questionDialogDate.questionType == '2') {
        return '一般'
      } else {
        return '困难'
      }
    }
  },
  methods: {
    closeDialog() {
      this.$emit('update:questionDialog', false)
    }
  }
}
</script>

<style scoped lang="less"></style>
